<template>
  <div style="display: flex; flex-direction: row">
    <ImgCutter
      v-bind="$attrs"
      ref="imgCutterModal"
      :label="props.label"
      v-on:cutDown="cutDownImg"
      :tool="true"
      :isModal="props.isModal"
      :sizeChange="true"
      :boxWidth="700"
      :boxHeight="458"
      :cutWidth="470"
      :cutHeight="270"
      @onPrintImg="cutterPrintImg"
      @onClearAll="clearAll"
    >
    </ImgCutter>
    <div style="margin-left: 10px; padding: 10px">
      <div class="img-box">
        <img :src="temImgPath" style="width: 100%" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

import ImgCutter from 'vue-img-cutter'

import { imgProps } from './props'

const emit = defineEmits(['getCoverImage']) //与父组件事件通信
const props = defineProps(imgProps)
const temImgPath = ref('')
const imgCutterModal = ref()
watch(
  () => props.imgUrl,
  () => {
    temImgPath.value = props.imgUrl as string
    setImgUrl(temImgPath.value)
  }
)
//实时更新预览效果
function cutterPrintImg(obj: any) {
  temImgPath.value = obj.dataURL
}

// 图片裁剪点击确认后触发
function cutDownImg(option: any) {
  //向后端发送请求等
  //请求成功时，emit("getCoverImage")，让父组件再次获取刚修改的新图片
}

function clearAll() {
  temImgPath.value = ''
}

const setImgUrl = (url: string) => {
  imgCutterModal.value?.handleOpen({
    name: '',
    src: url
  })
}
</script>

<style lang="scss" scoped>
.img-box {
  display: flex;
  align-items: center;
  min-width: 400px;
  min-height: 400px;
  border: 1px solid #e8e8e8;
  background-color: rgba(0, 0, 0, 0.1);
}
</style>
